<script>
import { onMounted, reactive, toRefs } from "vue";
import { getDetailsMatch } from "../assets/api/match.js";
import { useRoute } from "vue-router";

export default {
  setup() {
    let route = useRoute();
    const lists = reactive({
      hotlist: [],
      eventslist: [],
      classTabid: 1,
      matchid: null,
      MatchId: route.query.id,
      matchList: [],
      matchStaticsGoalKicks: [],
      matchStaticsShotsOnGoal: [],
      matchStaticsBallPossession: [],
      matchStaticsCornerKicks: [],
      matchStaticsYellow: [],
      matchStaticsAttack: [],
      matchStaticsDangerAttack: [],
      shezheng: 0,
      shemen: 0,
      attack: 0,
      dangerAttack: 0,
      currentRate0: 0,
      currentRate1: 0,
      currentRate2: 0,
      tab: [
        {
          id: 1,
          name: "文字直播",
        },
        {
          id: 2,
          name: "技术统计",
        },
      ],
    });

    onMounted(() => {
      window.scrollTo(0, 0);
      getDetailsMatch(lists.MatchId).then((data) => {
        console.log(data);
        lists.matchList = data.data;
        lists.matchStaticsGoalKicks = data.data.matchStaticsGoalKicks;
        lists.matchStaticsShotsOnGoal = data.data.matchStaticsShotsOnGoal;
        lists.matchStaticsBallPossession = data.data.matchStaticsBallPossession;
        lists.matchStaticsCornerKicks = data.data.matchStaticsCornerKicks;
        lists.matchStaticsYellow = data.data.matchStaticsYellow;
        lists.matchStaticsAttack = data.data.matchStaticsAttack;
        lists.matchStaticsDangerAttack = data.data.matchStaticsDangerAttack;
        lists.shezheng = parseInt(
          (lists.matchStaticsShotsOnGoal.team2 /
            (lists.matchStaticsShotsOnGoal.team1 +
              lists.matchStaticsShotsOnGoal.team2)) *
            100
        );
        lists.shemen = parseInt(
          (lists.matchStaticsGoalKicks.team2 /
            (lists.matchStaticsGoalKicks.team1 +
              lists.matchStaticsGoalKicks.team2)) *
            100
        );
        lists.attack = parseInt(
          (lists.matchStaticsAttack.team1 /
            (lists.matchStaticsAttack.team1 + lists.matchStaticsAttack.team2)) *
            100
        );
        lists.dangerAttack = parseInt(
          (lists.matchStaticsDangerAttack.team1 /
            (lists.matchStaticsDangerAttack.team1 +
              lists.matchStaticsDangerAttack.team2)) *
            100
        );
      });
    });
    return {
      ...toRefs(lists),
    };
  },
};
</script>
<template>
  <div>
    <div class="container match">
      <div class="top">
        <div class="nav">
          <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i>
          <div class="center">
            <div class="name">{{ matchList.tournamentName }}</div>
            <div class="time">{{ matchList.date }}</div>
          </div>
          <i></i>
        </div>
        <div class="content">
          <div class="left">
            <div class="img">
              <img :src="matchList.awayTeamIcon" alt="" />
            </div>
            <p>{{ matchList.awayTeamShowName }}</p>
            <span>(主)</span>
          </div>
          <div class="center">
            <span class="FootballStatus">{{ matchList.currentStatus }}</span>
            <div class="countDown">
              <div class="left">{{ matchList.awayUpHalfTeamScore }}</div>
              :
              <div class="right">{{ matchList.homeUpHalfTeamScore }}</div>
            </div>
            <div class="titleBodyButton">
              <div class="img">
                <img src="../assets/img/match01.png" alt="" />
              </div>
              <span>动画</span>
            </div>
          </div>
          <div class="right">
            <div class="img">
              <img :src="matchList.homeTeamIcon" alt="" />
            </div>
            <p>{{ matchList.homeTeamShowName }}</p>
            <span>(客)</span>
          </div>
        </div>
      </div>
      <van-tabs>
        <van-tab title="赛况">
          <div class="resultBox">
            <div class="matchresult">
              <div class="matchResultBox">
                <span v-if="matchStaticsGoalKicks != null">{{
                  matchStaticsGoalKicks.team1
                }}</span>
                <span v-if="matchStaticsGoalKicks == null">0</span>
                <van-circle
                  v-model:current-rate="currentRate0"
                  :rate="shemen"
                  text="射门"
                  size="50px"
                  :stroke-width="80"
                  layer-color="#f4f4f7"
                  v-if="matchStaticsGoalKicks != null"
                />
                <div class="circle" v-if="matchStaticsGoalKicks == null">
                  射门
                </div>
                <p v-if="matchStaticsGoalKicks != null">
                  {{ matchStaticsGoalKicks.team2 }}
                </p>
                <p v-if="matchStaticsGoalKicks == null">0</p>
              </div>
              <div class="matchResultBox">
                <span v-if="matchStaticsShotsOnGoal != null">{{
                  matchStaticsShotsOnGoal.team1
                }}</span>
                <span v-if="matchStaticsShotsOnGoal == null">0</span>
                <van-circle
                  v-model:current-rate="currentRate1"
                  :rate="shezheng"
                  text="射正"
                  size="50px"
                  :stroke-width="80"
                  layer-color="#f4f4f7"
                  v-if="matchStaticsShotsOnGoal != null"
                />
                <div class="circle" v-if="matchStaticsShotsOnGoal == null">
                  射门
                </div>
                <p v-if="matchStaticsShotsOnGoal != null">
                  {{ matchStaticsShotsOnGoal.team2 }}
                </p>
                <p v-if="matchStaticsShotsOnGoal == null">0</p>
              </div>
              <div class="matchResultBox">
                <span v-if="matchStaticsBallPossession != null">{{
                  matchStaticsBallPossession.team1
                }}</span>
                <span v-if="matchStaticsBallPossession == null">0</span>
                <van-circle
                  v-if="matchStaticsBallPossession != null"
                  v-model:current-rate="currentRate2"
                  :rate="matchStaticsBallPossession.team2"
                  text="控球"
                  size="50px"
                  :stroke-width="80"
                  layer-color="#f4f4f7"
                />
                <div class="circle" v-if="matchStaticsBallPossession == null">
                  控球
                </div>
                <p v-if="matchStaticsBallPossession != null">
                  {{ matchStaticsBallPossession.team2 }}
                </p>
                <p v-if="matchStaticsBallPossession == null">0</p>
              </div>
            </div>
            <div class="cardBox">
              <div class="cardImgBox">
                <div class="one">
                  <div>
                    <img src="../assets/img/match02.png" alt="" />
                  </div>
                  <span v-if="matchStaticsCornerKicks != null">{{
                    matchStaticsCornerKicks.team1
                  }}</span>
                  <span v-if="matchStaticsCornerKicks == null">0</span>
                </div>
                <div class="two">
                  <div class="img">
                    <img src="../assets/img/match03.png" alt="" />
                  </div>
                  <span>0</span>
                </div>
                <div class="three">
                  <div class="img">
                    <img src="../assets/img/match04.png" alt="" />
                  </div>
                  <span v-if="matchStaticsYellow != null">{{
                    matchStaticsYellow.team1
                  }}</span>
                  <span v-if="matchStaticsYellow == null">0</span>
                </div>
              </div>
              <div class="lineProgressBox">
                <div class="lineProgress">
                  <span v-if="matchStaticsAttack != null">{{
                    matchStaticsAttack.team1
                  }}</span>
                  <span v-if="matchStaticsAttack == null">0</span>
                  <span class="lineProgressSpan">进攻</span>
                  <span v-if="matchStaticsAttack != null">{{
                    matchStaticsAttack.team2
                  }}</span>
                  <span v-if="matchStaticsAttack == null">0</span>
                </div>
                <div class="line" style="padding: 0px 12px">
                  <van-progress
                    :percentage="attack"
                    :show-pivot="false"
                    v-if="matchStaticsAttack != null"
                  />
                  <div class="right" v-if="matchStaticsAttack == null"></div>
                  <div class="left" v-if="matchStaticsAttack == null"></div>
                </div>
                <div class="lineProgress">
                  <span v-if="matchStaticsDangerAttack != null">{{
                    matchStaticsDangerAttack.team1
                  }}</span>
                  <span v-if="matchStaticsDangerAttack == null">0</span>
                  <span class="lineProgressSpan">危险进攻</span>
                  <span v-if="matchStaticsDangerAttack != null">{{
                    matchStaticsDangerAttack.team2
                  }}</span>
                  <span v-if="matchStaticsDangerAttack == null">0</span>
                </div>
                <div class="line" style="padding: 0px 12px">
                  <van-progress
                    :percentage="dangerAttack"
                    :show-pivot="false"
                    v-if="matchStaticsDangerAttack != null"
                  />
                  <div
                    class="right"
                    v-if="matchStaticsDangerAttack == null"
                  ></div>
                  <div
                    class="left"
                    v-if="matchStaticsDangerAttack == null"
                  ></div>
                </div>
              </div>
              <div class="cardImgBox">
                <div class="three">
                  <div class="img">
                    <img src="../assets/img/match04.png" alt="" />
                  </div>
                  <span v-if="matchStaticsYellow != null">{{
                    matchStaticsYellow.team2
                  }}</span>
                  <span v-if="matchStaticsYellow == null">0</span>
                </div>
                <div class="two">
                  <div class="img">
                    <img src="../assets/img/match03.png" alt="" />
                  </div>
                  <span>0</span>
                </div>
                <div class="one">
                  <div>
                    <img src="../assets/img/match02.png" alt="" />
                  </div>
                  <span v-if="matchStaticsCornerKicks != null">{{
                    matchStaticsCornerKicks.team2
                  }}</span>
                  <span v-if="matchStaticsCornerKicks == null">0</span>
                </div>
              </div>
            </div>
          </div>

          <div class="bodyBox">
            <div class="tab">
              <ul>
                <li
                  v-for="item in tab"
                  :key="item.id"
                  @click="tabid(item.id)"
                  :class="{ active: classTabid == item.id }"
                >
                  <span>{{ item.name }}</span>
                </li>
              </ul>
              <div v-show="classTabid == 1">
                <van-empty
                  class="custom-image"
                  image="https://h5.bs3.cn/static/img/noNarrate.f5bb046.png"
                  description="暂无数据"
                />
              </div>
              <div v-show="classTabid == 2">
                <van-empty
                  class="custom-image"
                  image="https://h5.bs3.cn/static/img/noNarrate.f5bb046.png"
                  description="暂无数据"
                />
              </div>
            </div>
          </div>

          <div class="iconListBox">
            <div class="iconbox">
              <div class="img">
                <img src="../assets/img/match11.png" alt="" />
              </div>
              <span>进球</span>
            </div>
            <div class="iconbox">
              <div class="img">
                <img src="../assets/img/match12.png" alt="" />
              </div>
              <span>点球</span>
            </div>
            <div class="iconbox">
              <div class="img">
                <img src="../assets/img/match13.png" alt="" />
              </div>
              <span>点球不进</span>
            </div>
            <div class="iconbox">
              <div class="img">
                <img src="../assets/img/match14.png" alt="" />
              </div>
              <span>乌龙球</span>
            </div>
            <div class="iconbox">
              <div class="img">
                <img src="../assets/img/match15.png" alt="" />
              </div>
              <span>角球</span>
            </div>
            <div class="iconbox">
              <div class="img">
                <img src="../assets/img/match16.png" alt="" />
              </div>
              <span>助攻</span>
            </div>
            <div class="iconbox">
              <div class="img">
                <img src="../assets/img/match17.png" alt="" />
              </div>
              <span>黄牌</span>
            </div>
            <div class="iconbox">
              <div class="img">
                <img src="../assets/img/match18.png" alt="" />
              </div>
              <span>红牌</span>
            </div>
          </div>
        </van-tab>
        <van-tab title="直播">
          <div class="hot">
            <h3>更多直播</h3>
            <ul class="hotlist">
              <li
                v-for="item in hotlist"
                :key="item.id"
                @click="getid(item.id)"
              >
                <div class="img">
                  <img :src="item.img" alt="" />
                  <div class="living">
                    <img src="../assets/img/live.gif" alt="" /><span
                      >直播中</span
                    >
                  </div>
                  <div class="text">
                    <div class="left">{{ item.text }}</div>
                    <div class="right">
                      <i class="iconfont icon-huo"></i
                      ><span>{{ item.num }}</span>
                    </div>
                  </div>
                </div>
                <div class="bottom">
                  <div class="title one-txt-cut">{{ item.title }}</div>
                  <div class="label">{{ item.label }}</div>
                </div>
              </li>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.match {
  background-color: #f4f4f4;
  .top {
    background-color: #fff;
    padding: 10px 10px 0;
    background-image: url(../assets/img/match.png);
    position: relative;
    color: white;
    background-size: 100% 100%;
    height: 239px;
    .nav {
      display: flex;
      align-items: center;
      //   justify-content: space-between;
      .center {
        text-align: center;
        font-size: 12px;
        margin-left: 32%;
        .name {
          margin-bottom: 6px;
        }
      }
    }
    .content {
      padding: 30px 10px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p {
        font-size: 12px;
      }
    }
    .right,
    .left {
      width: 24%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .img {
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
        img {
          width: 100%;
        }
      }
      p {
        font-weight: 700;
        margin-top: 6px;
        width: 90px;
        text-align: center;
      }
      span {
        font-size: 12px;
        transform: scale(0.83, 0.83);
      }
    }
    .center {
      margin-left: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .FootballStatus {
        // width: 40px;
        padding: 5px 5px 4px 6px;
        border-radius: 5px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.5);
        margin-bottom: 15px;
      }
      .countDown {
        display: flex;
        justify-content: space-around;
        border: 1px solid rgba(255, 255, 255, 0.4);
        width: 100px;
        font-size: 25px;
        padding: 4px 0;
        border-radius: 7px;
        color: #ffffff;
        margin: 0 auto;
        text-align: center;
        p {
          margin-top: 2px;
          margin-bottom: 4px;
          font-size: 12px;
        }
        span {
          font-size: 18px;
        }
      }
      .titleBodyButton {
        padding: 0 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 15px;
        font-size: 13px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        height: 25px;
        border-radius: 25px;
        line-height: 25px;
        position: relative;
        .img {
          margin-right: 4px;
          width: 16px;
          height: 16px;
          img {
            width: 100%;
          }
        }
      }
    }
  }
  .resultBox {
    background-color: #fff;
    .matchresult {
      border-top: 1px solid #efecec;
      padding: 30px 0 8px;
      display: flex;
      .matchResultBox {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 33%;

        &::after {
          content: "";
          position: absolute;
          right: 0;
          bottom: 20px;
          height: 20px;
          background: #ececec;
          width: 1px;
        }
        span {
          margin-right: 6px;
          font-weight: 600;
        }
        p {
          margin-left: 6px;
          font-weight: 600;
        }
        .circle {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          line-height: 46px;
          color: #989aa8;
          text-align: center;
          font-size: 13px;
          transform: scale(0.85, 0.85);
          border: 6px solid #f4f4f7;
        }
      }
    }
    .cardBox {
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 5px 20px 0;
      height: 75px;
      text-align: center;
      font-weight: 600;
      padding-bottom: 12px;
      .cardImgBox {
        width: 28%;
        display: flex;
        justify-content: space-around;
        .one {
          display: flex;
          flex-direction: column;
          align-items: center;
          //   margin-top: 5px;
          height: 56px;
          width: 30px;
          justify-content: space-between;
          img {
            width: 12px;
            height: 12px;
          }
        }
        .two {
          display: flex;
          flex-direction: column;
          align-items: center;
          //   margin-top: 2px;
          height: 56px;
          width: 30px;
          justify-content: space-between;
          img {
            width: 18px;
            height: 18px;
          }
        }
        .three {
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 56px;
          width: 30px;
          justify-content: space-between;
          img {
            width: 24px;
            height: 24px;
          }
        }
      }
      .lineProgressBox {
        .lineProgress {
          // display: flex;
          display: flex;
          justify-content: space-around;
          span {
            width: 50px;
            font-weight: 600;
            font-size: 14px;
          }
          .lineProgressSpan {
            width: 65px;
            font-weight: 400;
            color: #a3a2aa;
            font-size: 13px;
          }
        }
        .line {
          .left {
            display: inline-block;
            background-color: #ebebeb;
            height: 4px;
            width: 72px;
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
          }
          .right {
            display: inline-block;
            background-color: #dddddd;
            height: 4px;
            width: 72px;
            margin-left: -4px;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
          }
        }
      }
    }
  }
  .bodyBox {
    background-color: #fff;
    margin-top: 15px;
    .tab {
      padding-top: 2px;
      padding-bottom: 101px;
      ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 31px;
        margin: 13px auto 0;
        background-color: #f6f7f9;
        height: 31px;
        width: 162px;
        font-size: 12px;
        color: #9ea1a8;
        text-align: center;
        border-radius: 5px;
        font-weight: 600;
        li {
          width: 76px;
          height: 27px;
          margin: 0 2px;
          background-color: #f6f7f9;
        }
        .active {
          color: #6a3aed;
          background-color: #fff;
          border-radius: 5px;
          width: 76px;
          height: 27px;
          margin: 0 3px;
        }
      }
    }
  }
  .hot {
    padding: 10px;
    h3 {
      font-size: 16px;
      font-weight: 600;
      font-family: 黑体;
      margin: 20px 0 10px;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 49%;
        background-color: #fff;
        border-radius: 8px;
        margin-bottom: 10px;
        .img {
          position: relative;
          // width: 100%;
          img {
            width: 100%;
            height: 98px;
            border-radius: 8px 8px 0 0;
          }
          .living {
            position: absolute;
            top: 10px;
            right: 8px;
            width: 48px;
            height: 16px;
            background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
            border-radius: 8px;
            padding-right: 2px;
            vertical-align: middle;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            img {
              width: 8px;
              height: 8px;
              margin-left: 8px;
            }
            span {
              flex: 1;
              transform: scale(0.73, 0.73);
              opacity: 0.8;
              white-space: nowrap;
            }
          }
          .text {
            position: absolute;
            display: flex;
            width: 100%;
            font-size: 12px;
            padding: 5px 10px;
            margin-top: -26px;
            color: white;
            font-weight: 700;
            background: linear-gradient(
              180deg,
              rgba(0, 0, 0, 0) 0,
              rgba(0, 0, 0, 0.8) 100%
            );
            .left {
              flex: 1;
            }
            .right {
              .iconfont {
                font-weight: normal;
                margin-right: 1px;
              }
            }
          }
        }
        .bottom {
          height: 40px;
          display: flex;
          align-items: center;
          .title {
            flex: 1;
            color: #1e1e1e;
            font-size: 13px;
            transform: scale(0.85, 0.85);
          }
          .label {
            color: #6a3aed;
            font-size: 14px;
            transform: scale(0.83, 0.83);
            width: 40px;
            height: 24px;
            line-height: 24px;
            border-radius: 6px 3px 5px 6px;
            background-color: #f2ecf9;
            text-align: center;
            margin-right: 8px;
          }
        }
      }
    }
  }
  .iconListBox {
    // box-shadow: -1px 3px 1px #f5f5f5;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #ffffff;
    width: 100%;
    height: 101px;
    display: flex;
    flex-wrap: wrap;
    padding: 15px 20px;
    .iconbox {
      display: flex;
      width: 21%;
      align-items: center;
      margin-left: 13px;
      .img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
        img {
          width: 100%;
        }
      }
      span {
        font-size: 12px;
        color: #a3a2aa;
      }
    }
  }
}

::v-deep .van-tabs__nav {
  background-color: #fff;
  //   border-bottom: 1px solid #efecec;
  .van-tab__text {
    color: #3f3f3f;
    font-size: 16px;
  }
  .van-tabs__line {
    background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
    height: 3px;
    border-radius: 2px;
  }
  .van-tab--active {
    font-weight: bold;
    // color: #835df6;
  }
}
::v-deep .van-share-sheet__options {
  justify-content: space-around;
  padding: 16px 0;
}
::v-deep .van-loading {
  position: fixed;
  top: 100px;
  z-index: 100;
  width: 100%;
  height: 400px;
  line-height: 400px;
  text-align: center;
}
</style>